<template>
	<view class="search-box">
		<uni-search-bar 
		radius="80"
		cancelButton="none"
		@input="handleinput"
		/>
		<!-- 搜索建议列表 -->
		<view class="search-list">
			<view class="search-item" v-for="(item,index) in searchList" :key="index" @click="goSearchDetail(item)">
				<view class="goods-name">{{item.goods_name}}</view>
				<uni-icons type="arrowright" size='16'></uni-icons>
			</view>
		</view>
		<!-- 搜索历史区 -->
		<view class="history-container" v-if="searchList.length == 0 ">
			<view class="history-box">
				<text>搜索历史</text>
				<uni-icons type="trash" size="20" @click="deletClick"></uni-icons>
			</view>
			<view class="history-list">
					<uni-tag class="uni-tap" :text="item"   v-for="(item,index) in hsitories" :key="index" @click="gotoGooodslist(item)"></uni-tag>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:'',
				timer:null,
				searchList:[],
				historyList:[],
				isShow:false
			};
		},
		computed:{
			hsitories(){
				return [...this.historyList].reverse()
			}
		},
		onLoad(){
			this.historyList = JSON.parse(uni.getStorageSync('kw')||'[]')
		},
		methods:{
			deletClick(){
				this.historyList = []
				uni.setStorageSync('kw',"[]")
			},
			saveSearchHistory(){
				// if(this.historyList.indexOf(this.searchValue) !=-1)return
				// this.historyList.push(this.searchValue)
				//------------
				let set = new Set(this.historyList)
				set.delete(this.searchValue)
				set.add(this.searchValue)
				this.historyList = Array.from(set)
				//数据持久化
				uni.setStorageSync('kw',JSON.stringify(this.historyList))
			},
			handleinput(e){
				//防抖处理
				clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.searchValue = e
					this.querySearch()
				},500)
			},
			async querySearch(){
				if(this.searchValue === ''){
					this.searchList=[]
					return;
				}
				const {data:res} = await uni.$http.get('/api/public/v1/goods/qsearch',{query:this.searchValue})
				if(res.meta.status !==200) return uni.$showMsg()
				this.searchList = res.message
				this.saveSearchHistory()
			},
			goSearchDetail(item){
				console.log(item,'item')
				uni.navigateTo({
					url:"/subpkg/goods_detail/goods_detail?goods_id="+item.goods_id
				})
			},
			gotoGooodslist(item){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?query='+item
				})
			}
		}
	}
</script>

<style lang="scss">
.search-box{
	position: sticky;
	top:0;
	z-index: 999;
}
.search-list{
	padding:0 5px;
	.search-item{
		display:flex;
		justify-content: space-between;
		font-size:12px;
		padding:13px 0;
		border-bottom:1px solid #efefef;
		// background-color: yellow;
		.goods-name{
			 // 文字不允许换行（单行文本）
			      white-space: nowrap;
			      // 溢出部分隐藏
			      overflow: hidden;
			      // 文本溢出后，使用 ... 代替
			      text-overflow: ellipsis;
			      margin-right: 3px;
		}
	}
}
.history-container{
	padding:0 6px;
}
.history-box{
	display: flex;
	justify-content: space-between;
	align-items:center;
	padding:5px 0;
	font-size:12px;
	border-bottom:1px solid #efefef;
}
.history-list{
	display: flex;
	flex-wrap:wrap;
	.uni-tap{
		padding-top:5px;
		margin-right:5px;
		margin-bottom:5px;
	}
	
}
</style>
